<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- echarts -->
    <script src="../05chapter/echarts/echarts.js"></script>
    <script src="../05chapter/echarts/dataTool.js"></script>
</head>
<body>
     <div id="main" style="width:600px;height:400px;margin:0 auto">
    </div>

    <!-- 两种性别的三种基因含量表箱线图，白宁超，2017年9月19日20:20:49 -->
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts图表
        var myChart = echarts.init(document.getElementById('main'));

        // Generate data.
        data = [];
        for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
            var seriesData = [];
            for (var i = 0; i < 18; i++) {
                var cate = [];
                for (var j = 0; j < 100; j++) {
                    cate.push(Math.random() * 200);
                }
                seriesData.push(cate);
            }
            data.push(echarts.dataTool.prepareBoxplotData(seriesData));
        }


        option = {
            title: {
                text: 'Multiple Categories',
                left: 'center',
            },
            legend: {
                y: '10%',
                data: ['category0', 'category1', 'category2', 'category3']
            },
            tooltip: {
                trigger: 'item',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '10%',
                top: '20%',
                right: '10%',
                bottom: '15%'
            },
            xAxis: {
                type: 'category',
                data: data[0].axisData,
                boundaryGap: true,
                nameGap: 30,
                splitArea: {
                    show: true
                },
                axisLabel: {
                    formatter: 'expr {value}'
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                name: 'Value',
                min: -400,
                max: 600,
                splitArea: {
                    show: false
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    start: 0,
                    end: 20
                },
                {
                    show: true,
                    height: 20,
                    type: 'slider',
                    top: '90%',
                    xAxisIndex: [0],
                    start: 0,
                    end: 20
                }
            ],
            series: [
                {
                    name: 'category0',
                    type: 'boxplot',
                    data: data[0].boxData,
                    tooltip: {formatter: formatter}
                },
                {
                    name: 'category1',
                    type: 'boxplot',
                    data: data[1].boxData,
                    tooltip: {formatter: formatter}
                },
                {
                    name: 'category2',
                    type: 'boxplot',
                    data: data[2].boxData,
                    tooltip: {formatter: formatter}
                }
            ]
        };

        function formatter(param) {
            return [
                'Experiment ' + param.name + ': ',
                'upper: ' + param.data[0],
                'Q1: ' + param.data[1],
                'median: ' + param.data[2],
                'Q3: ' + param.data[3],
                'lower: ' + param.data[4]
            ].join('<br/>')
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>


